/** IT-PUE部件
 * Author:      yangjq 
 * CreateTime:  2023/8/13 18:07:06 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:31:59 
 * Description: 
*/ 
<template>
<div ref="echarsRef" :style="{width:props.width , height:props.height}"></div>
</template>

<script lang="ts" setup>
import {
  ref,
  Ref,
  reactive,
  watchEffect,
  onMounted,
  watch
} from 'vue';
import {
  useECharts
} from '/@/hooks/web/useECharts';

const props = defineProps({
  width: {
    type: String as PropType < string > ,
    default: '',
  },
  height: {
    type: String as PropType < string > ,
    default: '',
  },
  pue: {
    type: Number as PropType < number > ,
    default: 0,
  }
});

const echarsRef = ref < HTMLDivElement | null > (null);

const {
  setOptions,
  echarts,
  getInstance
} = useECharts(echarsRef as Ref < HTMLDivElement > , 'dark');

let DeltValue = 0;

const option = reactive({});
const option1 = reactive({});

let dataValue = 0;

function initCharts() {  
  Object.assign(option1, reactive({
    series: [
    {
      type: 'gauge',
      min:0,
      max:3,
      axisLine: {
        lineStyle: {
          width: 4,
          color: [
            [0.5, '#7CFC00'],
            [1, '#FF4500']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        distance: -4,
        length: 2,
        show:false,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      splitLine: {
        distance: -2,
        length: 6,
        lineStyle: {
          color: '#fff',
          width: 1
        }
      },
      axisLabel: {
        color: 'inherit',
        distance: 10,
        fontSize: 12
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}',
        color: 'inherit',
        fontSize: 18,
        fontWeight:'normal',
        offsetCenter:[0,'80%']
      },
      data: [
        {
          value: dataValue,
          name: 'PUE',
          title:{
            show: true,
            color: '#fff',
          }
        }
      ]
    }
  ]
  }));
  Object.assign(option, reactive(
    {
      series: [
        {
          type: 'gauge',
          startAngle: 225,
          endAngle: -45,
          //center: ['18%', '57%'],
          name: 'PUE',
          radius: '75%',//80
          min: 0,
          max: 3,
          splitNumber: 4,
          itemStyle: {
            color: '#58D9F9',
            shadowColor: 'rgba(0,138,255,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          progress: {
            show: true,
            roundCap: true,
            width: 4
          },
          pointer: {
            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
            length: '75%',
            width: 8,
            offsetCenter: [0, '5%']
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 4
            }
          },
          axisTick: {
            splitNumber: 5,
            lineStyle: {
              width: 1,
              color: '#999'
            }
          },
          splitLine: {
            length: 8,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          axisLabel: {
            distance: 8,
            color: '#999',
            fontSize: 12
          },
          title: {
            show:true,
            fontSize: 20,
            fontWeight: 800,
            color: '#fff',
            offsetCenter: [0, '80%']
          },
          detail: {
            valueAnimation: true,
            color: 'inherit',
            fontSize: 18,
            offsetCenter: [0, '35%'],
            formatter: function (value) {
              return '{value|' + value.toFixed(2) + '}';
            },
            rich: {
              value: {
                fontSize: 16,
                fontWeight: 'bolder',
                color: '#59E817'
              },
              unit: {
                fontSize: 20,
                color: '#999',
                padding: [0, 0, -20, 10]
              }
            }
          },
          data: [
            {
              value: 1.5,
              name: 'PUE'
            }
          ]
        }
      ]
    }));
  setOptions(option);
}
watchEffect(() => {
  initCharts();
});
onMounted(() => {
  dataValue = props.pue;
  initCharts();
});
/**
 *监听pue
 */
watch(
  () => props.pue,
  () => {
    initCharts();
  }
);
setInterval(function () {
  DeltValue++;
  if (DeltValue > 10) {
    DeltValue = 0;
  }
  dataValue = 3.0 * DeltValue / 10.0;
  setOptions(option);
}, 5000);
</script>

<style>
</style>
